Scatter Chart (স্ক্যাটার চার্ট) একটি শক্তিশালী ভিজ্যুয়ালাইজেশন টুল, যা দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা ডেটা পয়েন্টের বিতরণ প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত correlation, trends, এবং distribution বিশ্লেষণ করার জন্য ব্যবহৃত হয়, যেমন একটি নির্দিষ্ট সময়ে বিভিন্ন ডেটা পয়েন্টের অবস্থান বা একটি ভেরিয়েবলের পরিবর্তনের সাথে সম্পর্কিত অন্য ভেরিয়েবলের পরিবর্তন।
Google Charts এ Scatter Chart তৈরি করা খুব সহজ এবং এটি ডেটার মধ্যে সম্পর্ক দেখাতে কার্যকর।
Scatter Chart এর জন্য Data Setup
Scatter Chart তৈরি করতে, আপনাকে দুটি ভেরিয়েবলের জন্য ডেটা সেট করতে হবে। এখানে, আমরা X-axis এবং Y-axis এর জন্য ডেটা পয়েন্ট নির্ধারণ করব।
উদাহরণ: Basic Scatter Chart Data Setup
google.charts.load('current', {packages: ['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 3],
[2, 6],
[3, 7],
[4, 8],
[5, 9]
]);
var options = {
title: 'Basic Scatter Chart',
hAxis: {
title: 'X-Axis'
},
vAxis: {
title: 'Y-Axis'
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
ব্যাখ্যা:
- Data Setup: এখানে X এবং Y এর জন্য ডেটা পয়েন্ট প্রদান করা হয়েছে। প্রতিটি পয়েন্ট (X, Y) অক্ষের উপর প্লট হবে।
- arrayToDataTable(): এই ফাংশনটি ডেটাকে গুগল চার্টের জন্য প্রস্তুত করে।
Scatter Chart কাস্টমাইজেশন
Google Charts এ Scatter Chart কাস্টমাইজ করার অনেক উপায় রয়েছে, যেমন পয়েন্টের রঙ, আকার, অক্ষের শিরোনাম, চার্টের শিরোনাম ইত্যাদি। নিচে কিছু কাস্টমাইজেশন অপশন দেওয়া হলো:
১. Chart Title (চার্টের শিরোনাম)
চার্টের শিরোনাম কাস্টমাইজ করা যায়।
var options = {
title: 'Scatter Chart Example',
hAxis: {title: 'X-Axis'},
vAxis: {title: 'Y-Axis'}
};
২. Gridlines (গ্রিডলাইন)
Scatter Chart এর গ্রিডলাইন কাস্টমাইজ করা যায়, যা চার্টের পয়েন্টগুলো সঠিকভাবে তুলনা করতে সাহায্য করে।
var options = {
hAxis: {
gridlines: {color: '#f1f1f1', count: 4} // গ্রিডলাইন রঙ এবং সংখ্যা
},
vAxis: {
gridlines: {color: '#f1f1f1', count: 5}
}
};
৩. Point Colors (পয়েন্টের রঙ)
Scatter Chart এর পয়েন্টগুলোর রঙ কাস্টমাইজ করা যায়।
var options = {
pointSize: 10, // পয়েন্টের আকার
colors: ['#ff6347'] // পয়েন্টের রঙ (যেমন টমেটো রেড)
};
৪. Point Shape (পয়েন্টের আকৃতি)
পয়েন্টের আকৃতি পরিবর্তন করা যায় (যেমন, সার্কেল, স্কোয়ার, ট্রায়াঙ্গল ইত্যাদি)।
var options = {
pointShape: 'triangle' // পয়েন্টের আকৃতি ট্রায়াঙ্গল হবে
};
৫. Trendline (ট্রেন্ডলাইন)
Scatter Chart এ একটি ট্রেন্ডলাইন যোগ করা যায়, যা ডেটার প্রবণতা দেখায়।
var options = {
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3
}
}
};
পূর্ণাঙ্গ উদাহরণ: Scatter Chart with Customization
এখানে একটি সম্পূর্ণ উদাহরণ দেখানো হলো, যেখানে Scatter Chart এর বিভিন্ন কাস্টমাইজেশন অপশন প্রয়োগ করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Scatter Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 3],
[2, 6],
[3, 7],
[4, 8],
[5, 9]
]);
var options = {
title: 'Customized Scatter Chart',
hAxis: {
title: 'X-Axis',
gridlines: {color: '#f1f1f1', count: 4} // X-axis গ্রিডলাইন কাস্টমাইজ
},
vAxis: {
title: 'Y-Axis',
gridlines: {color: '#f1f1f1', count: 5} // Y-axis গ্রিডলাইন কাস্টমাইজ
},
pointSize: 10, // পয়েন্টের আকার
colors: ['#ff6347'], // পয়েন্টের রঙ
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Customized Scatter Chart</h2>
<div id="scatter_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- Gridlines: এক্স এবং ওয়াই অক্ষের গ্রিডলাইন কাস্টমাইজ করা হয়েছে।
- Point Size: পয়েন্টের আকার 10 পিক্সেল করা হয়েছে।
- Colors: পয়েন্টের রঙ টমেটো রেড করা হয়েছে।
- Trendline: ডেটার প্রবণতা দেখানোর জন্য লিনিয়ার ট্রেন্ডলাইন যোগ করা হয়েছে।
উপসংহার
Scatter Chart একটি গুরুত্বপূর্ণ ভিজ্যুয়ালাইজেশন টুল, যা ডেটার মধ্যে সম্পর্ক, প্রবণতা এবং বিতরণ প্রদর্শন করতে সাহায্য করে। Google Charts এর মাধ্যমে আপনি Scatter Chart তৈরি করতে পারবেন এবং বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে আপনার চার্টটিকে আরও কার্যকর এবং সুন্দর করে তুলতে পারবেন।
Read more
